const path = require('path'); // 使用node的path模块1
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // 报错引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 提取css
const PORT = 3002;

/**
 * webpack命令行可以传递参数 如：webpack --port 900
 * @env 参数 区分生产环境和开发环境
 */
module.exports = env => {

    // 防止env未传入
    // 传参数 webpack --env.production
    if(!env){
        env = {}
    }

    let plugins = [
        new CleanWebpackPlugin(),
        // webpack服务
        new HtmlWebpackPlugin({
            template: './app/views/index.html'
        }),
        // new HtmlWebpackPlugin({ //创建一个在内存中生成的html页面的插件
        //     template: path.join(__dirname, './src/index.html'),
        //     filename: 'index.html'
        // }),
        new VueLoaderPlugin(),
    ];
    
    // env.production 存在，则是生产环境
    if(env.production){
        plugins.push(
            // 使用DefinePlugin修改NODE_ENV环境变量
            // new webpack.DefinePlugin({
            //     'process.env': {
            //         NODE_ENV: "production"
            //     }
            // }),
            // css抽离
            new MiniCssExtractPlugin({
                filename: 'style.css'
            }),
        )
    }
    // console.log('envenvenve:::', env);
    // console.log('envenvenve:::', process);

    return {
        entry: {
            app: "./app/js/main.js" //配置入口文件 main.js
        },
        devServer: { // 配置服务
            contentBase: path.join(__dirname, "dist"), // 提供的静态文件
            compress: true, // 开启js压缩
            port: PORT, // 端口号
            hotOnly: true, // 热模块替换
            hot: true, // 热更新
        },
        module: {
            rules: [{ // loader链式使用按照相反的顺序执行，loader链中的第一个loader返回值给下一个loader，最后一个loader，返回webpack所预期的JavaScript
                test: /\.html$/,
                use: 'html-loader'
            },{
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader',
                        // options: {
                        //     cssModules: {
    
                        //     }
                        // }
                    }
                    // {
                    //     loader: "vue-style-loder"
                    // },
                    // {
                    //     loader: "css-loader"
                    // },
                    // {
                    //     loader: 'px2rem-loader',
                    //     options: {
                    //         remUni: 75,
                    //         remPrecision: 8
                    //     }
                    // },
                    // {loader: 'sass-loader'}
                ]
            },{
                test: /\.css$/,
                // 简写 use: ["style-loader"] =》 原始 use: [{loader: "style-loader"}]
                // use: ['style-loader','css-loader']
                use: [
                    {loader: "style-loader"},
                    {
                        loader: "css-loader",
                        options: {
                            // 开启 CSS Modules
                            modules: true,
                            // 自定义生成的类名
                            // localIdentName: '[local]_[hash:base64:8]'
                        }
                    },
                    {
                        loader: 'px2rem-loader',
                        options: {
                            remUni: 75,
                            remPrecision: 8
                        }
                    },
                    {loader: 'sass-loader'}
                ]
            },{
                test: /\.scss$/,
                use: [
                    env.production
                     ? MiniCssExtractPlugin.loader
                     : 'vue-style-loader',
                    //  'vue-style-loader',
                    // 'style-loader', // 使用CSS Modules要用vue-style-loader
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    {
                        loader: 'px2rem-loader',
                        options: {
                            remUni: 75,
                            remPrecision: 8
                        }
                    },
                    'sass-loader'
                ]
                // oneOf 当规则匹配时，只使用第一个匹配规则
                // oneOf: [
                //     {
                //         resourceQuery: /module/,
                //         use: [
                //             // 'vue-style-loader',
                //             MiniCssExtractPlugin.loader,
                //             {
                //                 loader: 'css-loader',
                //                 options: {
                //                     modules: true
                //                 }
                //             },
                //             {
                //                 loader: 'px2rem-loader',
                //                 options: {
                //                     remUni: 75,
                //                     remPrecision: 8
                //                 }
                //             },
                //             'sass-loader'
                //         ]
                //     },
                //     {
                //         use: [
                //             'vue-style-loader', 'css-loader',
                //             {
                //                 loader: 'px2rem-loader',
                //                 options: {
                //                     remUni: 75,
                //                     remPrecision: 8
                //                 }
                //             },
                //             'sass-loader'
                //         ]
                //     }
                // ]
                // use: ['style-loader','css-loader','sass-loader']
                // use: [
                //     {loader: 'vue-style-loader'},
                //     {loader: 'css-loader'},
                //     {
                //         loader: 'px2rem-loader',
                //         options: {
                //             remUni: 75,
                //             remPrecision: 8
                //         }
                //     },
                //     {loader: 'sass-loader'}
                // ]
            }]
            // loaders: [{
            //     test: /\.html$/, // 解析html文件使用html-loader
            //     loader: 'html-loader'
            // },{
            //     test: /\.vue$/, // 解析vue文件使用vue-loader
            //     loader: 'vue-loader'
            // }, {
            //     test: /\.scss$/,
            //     loader: 'style-loader!css-loader!sass-loader' // webpack支持文件多个loader串行解析，执行顺序是从左至右，使用'!'连接
            // }]
        },
        // ES6用法
        plugins,
        resolve: {
            alias: {
              'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
            }
          },
        output: { 
            filename: '[name].min.js', // name只能是name，后面可以自定义如：[name].js,name与entry中app对应
            path: path.resolve(__dirname, 'dist') // 表示输出的文件到dist目录下，__dirname是node的环境变量表示当前的路径
        }
    }
}